
async function getData(){
	try{
		const  res = await axios({
			url:"/dashboard",
		})
		
		const { overview,year,salaryData,groupData,provinceData } = res.data
		// console.log( overview );
		
		Object.keys(overview).forEach(key => { document.querySelector(`.${key}`).innerText  = overview[key] })
		
		document.querySelector('.username').innerText = localStorage.getItem('username')
		
		getYearSalay(year)
		
		getSalayRegion(salaryData)
		
		getClassGroupSalay(groupData)
		
		getBoyGirlSalay(salaryData)
		
		exitLogin()
		
	}catch(e){
		
	}
}

getData()


// 薪资走势
function getYearSalay(year){
	const card = document.querySelector('#line')
	// console.log(card);
	const myChart = echarts.init(card);
	// console.log(year);	
	// 指定图表的配置项和数据
	const option = {
		// 标题
		title:{
			// 标题文字
			text:"学员薪资走势",
			// 左侧距离
			left:"10",
			// 顶部距离
			top:"10",
			// 文本样式
			textStyle:{
				// 颜色
				color:"#333"
			}
		},
		// x轴
		xAxis: {
			// 坐标轴类型。
			type: 'category',
			// 类目数据，在类目轴（type: 'category'）中有效。
			data: year.map(v => v.month ),
			// 坐标轴轴线相关设置。
			axisLine:{
				// 坐标轴线线相关样式
				lineStyle:{
					color:"#ccc",
					type:"dashed"
				}
			}
		},
		// y轴
		yAxis: {
		// 系列列表
			type: 'value'
		},
		series: [{
			// 系列中的数据内容数组
			data: year.map(v => v.salary),
			// 折线类型
			type: 'line',
			// 是否平滑曲线显示。
			smooth: true,
			// 标记的大小
			symbolSize:"10",
			// 线条样式
			lineStyle:{
				// 线宽
				width:"8",
				// 线的颜色
				color:"darkblue"
			},
			// 区域填充样式
			areaStyle:{
				// 渐变色
				color:{
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 0.8,
					colorStops: [{
						offset: 0, color: 'blue' // 0% 处的颜色
					}, 
					{
						offset: 0.5, color: 'skyblue'
					},
					{
						offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
					}],
					global: false ,// 缺省为 false
				}
			}
		}],
		// 提示框组件。
		tooltip:{
			show:true,
			// 触发类型
			trigger:"axis"
		}

	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}

// 薪资分布
function getSalayRegion(salaryData){
	// console.log(salaryData);
	const card = document.querySelector('#salary')
	// console.log(card);
	const myChart = echarts.init(card);
	// console.log(year);	
	// 指定图表的配置项和数据
	const option = {
		// 提示框组件。
		tooltip: {
			// 触发类型
			trigger: 'item'
		},
		// 图例组件。
		legend: {
			// 是否显示
			show:true,
			// 底部距离
			bottom:"10",
			// 左侧距离
			left:"center"
		},
		// 颜色
		color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
		// 系列列表
		series: [{
			// 系列名称
			name: '薪资分布',
			// 列表类型
			type: 'pie',
			// 饼图半径
			radius: ['50%', '65%'],
			// 是否启用防止标签重叠策略，默认开启
			avoidLabelOverlap: false,
			
			// 图形样式。
			itemStyle: {
				// color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
				// 边框半径
				borderRadius: 15,
				// 边框颜色
				borderColor: '#fff',
				// 边框宽度
				borderWidth: 2
			},
			// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
			label: {
				// 是否显示
				show: false,
				// 显示位置
				position: 'center'
			},
			// 高亮状态的扇区和标签样式。
			emphasis: {
				// 标签样式
				label: {
					// 是否显示
					show: false,
					// 文字大小
					fontSize: 40,
					// 文字粗细
					fontWeight: 'bold'
				}
			},
			// 标签的视觉引导线配置
			labelLine: {
				// 是否显示
				show: false
			},
			data:salaryData.map(v => {
				return {value:v.b_count+v.g_count,name:v.label}
			})
		}]
	}   	
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}

// 班级分组薪资
function getClassGroupSalay(groupData,index = 1){
	// console.dir(groupData[index]);	
	// console.log(index);
	const card = document.querySelector('#lines')
	// console.log(card);
	const myChart = echarts.init(card);
	// console.log(year);	
	// 指定图表的配置项和数据
	const option = {
		// x轴设置
		xAxis: {
			// 坐标轴类型。
			type: 'category',
			// x轴数据
			data: groupData[index].map(v => v.name),
			// 坐标轴轴线
			splitLine:{
				// 刻度线样式
				lineStyle:{
					// 刻度线类型
					type:"dashed",
					// 刻度线颜色
					color:"#999"
				}
			},
			// 坐标轴刻度标签的相关设置。
			axisLabel:{
				// 颜色
				color:"green"
			}
		},
		// y轴
		yAxis: {
			// 坐标轴类型。
			type: 'value',
			// 坐标轴在 grid 区域中的分隔线。。
			splitLine:{
				// 坐标轴线线样式
				lineStyle:{
					type:"dashed"
				}
			}
		},
		// 提示框
		tooltip:{
			show:true,
			// trigger:"axis"
		},
		series: [
			{
				// 系列名称，用于tooltip的显示，legend 的图例筛选
				name:"期望薪资",
				// 数据
				data: groupData[index].map(v => v.hope_salary),
				// 类型
				type: 'bar',
				itemStyle:{
					color:{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#0e9814' // 0% 处的颜色
						}, {
							offset: 1, color: 'rgba(71,23,145,.3)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				}
			},
			{
				name:"就业薪资",
				data: groupData[index].map(v => v.salary),
				type: 'bar',
				itemStyle:{
					color:{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: 'blue' // 0% 处的颜色
						}, {
							offset: 1, color: 'rgba(71,98,215,.3)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				}
			}
		],
		// 直角坐标系内绘图网格
		grid:{
			// 定位
			left:"9%",
			right:"5%",
			top:"10%",
			bottom:"10%"
		}
		
	}
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	
	document.querySelector('#btns').addEventListener("click",function(e){
		if(e.target.classList.contains("btn")){
			// console.log(11);
			this.querySelector(".btn-blue").classList.remove("btn-blue")
			e.target.classList.add("btn-blue")
			const index = e.target.innerText
			
			option.xAxis.data = groupData[index].map(v => v.name)
			option.series[0].data = groupData[index].map(v => v.hope_salary)
			option.series[1].data = groupData[index].map(v => v.salary)
			
			myChart.setOption(option);
		}
	})
}

// 男女分组薪资
function getBoyGirlSalay(salaryData){
	console.log(salaryData);
	const card = document.querySelector('#gender')
	// console.log(card);
	const myChart = echarts.init(card);
	// console.log(year);	
	// 指定图表的配置项和数据
	const option = {
		// tooltip: {
		// 	trigger: 'item'
		// },
		// 标题，多个使用数组
		title:[
			{
				// 文本
				text:"男女薪资分布",
				// 位置
				left:"10",
				top:"10",
				// 文字风格
				textStyle:{
					fontSize:16,
				}
			},
			{
				text:"男生",
				left:"center",
				top:"45%",
				textStyle:{
					fontSize:14,
				}
			},
			{
				text:"女生",
				left:"center",
				top:"90%",
				textStyle:{
					fontSize:14,
				}
			}
		],
		// 
		series: [
			{
			// 名称
			// name: 'Access From',
			type: 'pie',
			// 半径
			radius: ['20%', '30%'],
			// 是否启用防止标签重叠策略
			avoidLabelOverlap: false,
			// 标签的视觉引导线配置
			labelLine:{
				// 第一个长度
				length:25,
				// 第二个长度
				length2:5
			},
			// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
			center:["50%","30%"],
			// 图形样式
			// itemStyle:{
			// 	color:["#03e223","orange","#03e138","#03e138","#03e138"]
			// },
			data:salaryData.map(function(v){
				return {value:v.b_count,name:v.label}
			})
			// data: [
			// 	{ value: 1048, name: 'Search Engine' },
			// 	{ value: 735, name: 'Direct' },
			// 	{ value: 580, name: 'Email' },
			// 	{ value: 484, name: 'Union Ads' },
			// 	{ value: 300, name: 'Video Ads' }
			// ]
			},
			{
			name: 'Access From',
			type: 'pie',
			radius: ['20%', '30%'],
			avoidLabelOverlap: false,
			// label: {
			// 	show: false,
			// 	position: 'center'
			// },
			// emphasis: {
			// 	label: {
			// 	show: true,
			// 	fontSize: 40,
			// 	fontWeight: 'bold'
			// 	}
			// },
			center:["50%","70%"],
			labelLine:{
				// 第一个长度
				length:25,
				// 第二个长度
				length2:5
			},
			data:salaryData.map(v => {
				 return {value:v.g_count,name:v.label}
			})
			// data: [
			// 	{ value: 1048, name: 'Search Engine' },
			// 	{ value: 735, name: 'Direct' },
			// 	{ value: 580, name: 'Email' },
			// 	{ value: 484, name: 'Union Ads' },
			// 	{ value: 300, name: 'Video Ads' }
			// ]
			}
		],
		color:["#06e103","orange","#01e198","#0c2908","#00c938"]
	};
	
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}

// 地图
function getMap(provinceData){
	const myEchart = echarts.init(document.querySelector('#map'))
	const option = {}
	
	myEchart.setOption(option)
}

